<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>08_3D-背面是否可见-案例练习</title>
        <style>
            /* （1）先摞在一起 */
            /* （2）移入之后让正面的旋转180deg 然后隐藏 */
            /* （3）背面旋转180deg */

            div {
                position: relative;
                width: 350px;
                height: 420px;
                /* 之所以开启3d空间是因为 背面是否可见的属性需要 */
                transform-style: preserve-3d;
                perspective: 3000px;

                /* 让旋转2秒内完成 */
                transition: transform 2s;
            }

            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 350px;
                height: 420px;
                backface-visibility: hidden;
            }

            /* 正面移入之后  背面（正面的背面） 是需要隐藏的 */
            div:hover {
                transform: rotateY(180deg);
            }

            /* 背面（第一张扑克牌） 旋转180deg 到正前方 */
            .back {
                transform: rotateY(180deg);
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./img/a.jpg" alt="背面" class="back">
            <img src="./img/b.jpg" alt="正面" class="face">
        </div>
    </body>
</html>